<template>
    <div class="home-content">
        <div class="head">
            <el-image
                fit="contain"
                src="/static/images/banner.png"
                class="banner">
                <div slot="placeholder" class="image-slot">
                    <i class="el-icon-loading"></i>
                </div>
                <div slot="error" class="image-slot">
                    <i class="el-icon-picture-outline"></i>
                </div>
            </el-image>
        </div>
        <div class="content">
            <div class="box">
                <div class="myCode" @click="jump(2)">
                    <div class="cont">
                        <div>我的通行码</div>
                        <div class="explain">进出住院部，主动出示</div>
                    </div>
                    <div class="rt">
                        <el-image src="/static/images/home-code.png"></el-image>
                    </div>
                </div>
            </div>
            <div class="list-top">
                <div class="shape"></div>
            </div>
            <div class="list">
                <div @click="jump(1)">
                    <div class="li">
                        <el-image src="/static/images/home-list4.png" fit="contain"></el-image>
                    </div>
                    <div class="info">
                        <p>患者登记</p>
                        <div class="tips">登记并绑定患者身份</div>
                    </div>
                </div>
                <div @click="jump(3)">
                    <div class="li">
                        <el-image src="/static/images/home-list2.png" fit="contain"></el-image>
                    </div>
                    <div class="info">
                        <p>陪护关联</p>
                        <div class="tips">绑定患者与陪护人员</div>
                    </div>
                </div>
                <div @click="jump(4)">
                    <div class="li">
                        <el-image src="/static/images/home-list3.png" fit="contain"></el-image>
                    </div>
                    <div class="info">
                        <p>探视申请</p>
                        <div class="tips">预约到院探视时间</div>
                    </div>
                </div>
                <div @click="jump(5)">
                    <div class="li">
                        <el-image src="/static/images/home-list1.png" fit="contain"></el-image>
                    </div>
                    <div class="info">
                        <p>健康打卡</p>
                        <div class="tips">每天的健康都看得见</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                countHospital: null,
                myDetail: null
            }
        },
        mounted() {
            this.$emit('footerHide')
        },
        methods: {
            getInfo(callback) {
                this.$http.get('/personData/getMyselfData').then(result => {
                    if (result.success) {
                        this.myDetail = result.data
                        if (callback) callback()
                    }
                })
            },
            jump(type) {
                let _this = this
                this.getInfo(data => {
                    if (type === 1) {
                        if (_this.myDetail.identity === 1) {
                            this.$router.push('/patient')
                        } else {
                            changeRoute('/apply', '?go=/apply')
                        }
                    } else if (type === 2) {
                        changeRoute('/code')
                    } else if (type === 3) {
                        changeRoute('/chaperone')
                    } else if (type === 4) {
                        changeRoute('/visitors')
                    } else if (type === 5) {
                        changeRoute('/punchCard')
                    }
                })

                function changeRoute(path, query) {
                    if (!_this.myDetail.phone) {
                        _this.$router.push('/register' + (query || ''))
                    } else {
                        _this.$router.push(path)
                    }
                }
            }
        },
        components: {}
    }
</script>

<style scoped lang="less">
    .home-content {
        height: 100%;
        width: 100%;
        overflow-x: hidden;
        overflow-y: auto;

        .head {
            text-align: center;
            background-size: cover;
            background-position: top center;
            background-repeat: no-repeat;
            padding: .3rem;
            color: #fff;
            background-color: #fff;

            .banner {
                width: 100%;
                // box-shadow: 2px 2px 6px -1px rgba(0, 0, 0, .1);
                filter: drop-shadow(0 0 .04rem rgba(0, 0, 0, .1));
            }
        }

        .content {
            padding: .3rem;
            margin-top: -.3rem;

            .title {
                font-size: .32rem;
                font-weight: bolder;
                margin-bottom: .2rem;
                padding-left: .2rem;
            }

            .box {
                filter: drop-shadow(0 0 .04rem rgba(0, 0, 0, .1));
            }

            .myCode {
                margin: .2rem 0;
                padding: .25rem 0 .25rem .3rem;
                display: flex;
                align-items: center;
                background: -webkit-radial-gradient(.3rem at right top, transparent 50%, #fff 0) top left / calc(100% - 2rem) 51% no-repeat,
                -webkit-radial-gradient(.3rem at left top, transparent 50%, #fff 0) top right / 2rem 51% no-repeat,
                -webkit-radial-gradient(.3rem at right bottom, transparent 50%, #fff 0) bottom left / calc(100% - 2rem) 51% no-repeat,
                -webkit-radial-gradient(.3rem at left bottom, transparent 50%, #fff 0) bottom right / 2rem 51% no-repeat;
                background: -o-radial-gradient(.3rem at right top, transparent 50%, #fff 0) top left / calc(100% - 2rem) 51% no-repeat,
                -o-radial-gradient(.3rem at left top, transparent 50%, #fff 0) top right / 2rem 51% no-repeat,
                -o-radial-gradient(.3rem at right bottom, transparent 50%, #fff 0) bottom left / calc(100% - 2rem) 51% no-repeat,
                -o-radial-gradient(.3rem at left bottom, transparent 50%, #fff 0) bottom right / 2rem 51% no-repeat;
                background: -moz-radial-gradient(.3rem at right top, transparent 50%, #fff 0) top left / calc(100% - 2rem) 51% no-repeat,
                -moz-radial-gradient(.3rem at left top, transparent 50%, #fff 0) top right / 2rem 51% no-repeat,
                -moz-radial-gradient(.3rem at right bottom, transparent 50%, #fff 0) bottom left / calc(100% - 2rem) 51% no-repeat,
                -moz-radial-gradient(.3rem at left bottom, transparent 50%, #fff 0) bottom right / 2rem 51% no-repeat;
                background: radial-gradient(.3rem at right top, transparent 50%, #fff 0) top left / calc(100% - 2rem) 51% no-repeat,
                radial-gradient(.3rem at left top, transparent 50%, #fff 0) top right / 2rem 51% no-repeat,
                radial-gradient(.3rem at right bottom, transparent 50%, #fff 0) bottom left / calc(100% - 2rem) 51% no-repeat,
                radial-gradient(.3rem at left bottom, transparent 50%, #fff 0) bottom right / 2rem 51% no-repeat;

                .icon {
                    width: 20%;
                    margin-right: .2rem;
                }

                .cont {
                    width: 70%;
                    font-size: .36rem;
                    line-height: .6rem;
                    font-weight: bolder;

                    .explain {
                        font-size: .28rem;
                        line-height: .3rem;
                        font-weight: normal;
                        margin-top: .1rem;
                        color: #999;
                    }
                }

                .rt {
                    width: 2rem;
                    text-align: center;
                    padding: .1rem 0;
                    border-left: 2px dashed #ddd;

                    .el-image {
                        max-width: 1.2rem;
                    }
                }
            }

            .list-top {
                margin-top: .4rem;
                margin-bottom: 1px;
                border-bottom: 2px solid #EEF3FF;

                .shape {
                    width: 40vw;
                    height: 0;
                    border-width: 0 1rem .3rem 0;
                    border-style: none solid solid;
                    border-color: transparent transparent #EEF3FF;
                }
            }

            .list {
                /*font-size: 0;*/
                box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .1);
                display: flex;
                flex-flow: wrap;

                &:last-child {
                    margin-bottom: 0;
                }

                .health_code {
                    margin-bottom: .4rem;
                }

                > div {
                    width: 50%;
                    padding: .5rem .1rem .4rem .2rem;
                    display: flex;
                    align-items: center;

                    .li {
                        width: .8rem;
                        height: .8rem;
                        font-size: .28rem;
                        cursor: pointer;

                        .el-image {
                            width: 100%;
                            height: 100%;
                        }
                    }

                    .info {
                        margin-left: .2rem;

                        p {
                            font-weight: bolder;
                            /*font-size: .28rem;*/
                            color: #40CAB5;
                        }

                        .tips {
                            font-size: .22rem;
                            color: #999;
                        }
                    }

                    .el-link {
                        display: block;
                    }
                }
            }
        }

    }
</style>
